import React, { useState, useEffect } from 'react'
import { Table, Space, Button, Tag } from 'antd'
import { getAdminList } from '../../api/admin'
function AdminList() {
  const [ adminList, setAdminList ] = useState([])

  useEffect(() => {
    getAdminList().then(res => {
      // console.log(res.data)
      setAdminList(res.data.data)
    })
  }, [])
  const columns = [
    {
      title: '序号',
      render (text, record, index) {
        return <span>{ index + 1}</span>
      }
    },
    {
      title: '管理员账户',
      dataIndex: 'adminname'
    },
    {
      title: '角色',
      dataIndex: 'role', // 2 超级管理员  1 管理员
      render (text) {
        return text === 2 ? <Tag color="green">超级管理员</Tag> :
        <Tag color="cyan">管理员</Tag>
      }
    },
    {
      title: '操作',
      render (text, record) {
        return (
          <Space>
            <Button type="dashed">编辑</Button>
            <Button type="danger">删除</Button>
          </Space>
        )
      }
    }
  ]
  return (
    <Space direction="vertical" style = {{ width: '100%' }}>
      <Button type="primary">添加管理员</Button>
      <Table 
        dataSource = { adminList } 
        columns = { columns } 
        rowKey = "adminid" />
    </Space>
  )
}

export default AdminList
